<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- link -->
    <link rel="icon" type="" href="">
    <style>
        /* body{
            font-size: 0;
        } */
        #a1,
        #a2 {
            width: 100px;
            height: 100px;
            background: hotpink;
            /* font-size: 16px; */
        }

        #box1,
        #box2 {
            background-color: aquamarine;
        }
    </style>
</head>

<body>
    <!-- div span -->
    <div>
        <h2>hhh<a href="#"><span>html5</span></a>ggggg</h2>
        <a href="#"><img src="" alt=""></a>
        <p>hhhhhhhhhhhhhhhhhhhhhhhh</p>
        <a href="#">wwwwwwwwwwwwwwwwww</a>
    </div>
    <!-- 标签分类-按类型划分 -->
    <!-- block :div p ul li h1 独占一行 支持所有样式 不写宽和父级相同 所占区域为矩形-->
    <!-- inline: span a em strong img 挨在一起 宽度由内容决定  无weight hight等样式内联标签之间有空隙（换行引起的）-->
    <!-- inline-block:input select 挨在一起 支持宽高 -->
    <div id="box1">2</div>
    <div id="box2">1</div>

    <span id="a1">hhhhh</span>
    <span id="a2">hh</span>

    <input type="text">
    <input type="text">
    <!-- 按显示划分 -->
    <img src="" alt="">
    <input type="text">

    <!-- 嵌套 -->
    <a href="#">
        <div></div>
    </a>

    <div>
        <span></span>
    </div>

    <div>
        <div></div>
    </div>

    <!-- strong&b加粗 em&i斜体 -->
    <strong>1</strong><!-- 语义化 -->
    <b>2</b>

    <em>3</em><!-- 语义化 -->
    <i>4</i>

    <!-- 引用标签 -->
    <p>
        <abbr title="世界卫生组织">WHO</abbr>成立由于1948
    </p>

    <!-- br换行 wbr软换行 -->
    <p>
        hello hhhh <br> jjjj iiii HTML<wbr>XML</wbr>request
    </p>

    <!-- pre code 针对代码 -->
    <pre>
        <code>
            &lt;head&gt;
        </code>
    </pre>
    <!-- map area 定义客户端图像映射 -->
    <img src="./2.jpg" alt="" usemap="#star">
    <map name="star">
        <area shape="rect" coords="205 83 386 173" href="https://editor.csdn.net/md/?articleId=124664209" alt="">
    </map>
    <!-- embed object 嵌入多媒体 移动端支持差 -->
    <object data="" type="">
        <param name="movie" value="./1.flash">
    </object>
    <!-- audio video -->
    <audio src="./2.mp3" controls loop autoplay></audio>
    <video>
        <source src="">
    </video>

</body>

</html>